<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../../../assets/docs.css" rel="stylesheet" type="text/css" media="screen" />
<title>MooTools 1.3 Documentation - Element/Element.Event.Pseudos</title>
</head>

<body>
  <div class="doc">
    <div class="methods">
      <h4 class="menu-item"><a href="#Pseudos">Pseudos</a></h4>
      <div class="menu-item"><a href="#Pseudos:once">once</a></div>
      <h4 class="menu-item"><a href="#Event">Event</a></h4>
      <div class="menu-item"><a href="#Event:Event-definePseudo">Event.definePseudo</a></div>
    </div>
    <div class="l-border r-border span-15 content">
      <h1 id="Pseudos"><a href="#Pseudos">Element.Event.Pseudos</a></h1>
      <p class="description">Defines a useful pseudo event: <code>:once</code> as well as the <code>definePseudo</code> method to create your own. See also the <code>:relay</code> pseudo in <a href="../../../docs/more/Element/Element.Delegation.html">Element.Delegation</a>.</p>
      <h2 id="Pseudos:once"><a href="#Pseudos:once">Pseudo: once</a></h2>
      <p class="description">The event will only fire once. The once pseudo will remove itself after the first excecution.</p>
      <h3>Example</h3>
      <pre class="javascript">myElement.<span class="me1">addEvent</span><span class="br0">(</span><span class="st0">'click:once'</span>, <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>

    <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'you clicked me'</span><span class="br0">)</span>;
<span class="br0">}</span><span class="br0">)</span>;
&nbsp;
<span class="co1">// If the user clicks the element twice, it will only once alert 'you clicked me'</span>
</pre>
      <h1 id="Event"><a href="#Event">Event</a></h1>
      <h2 id="Event:Event-definePseudo" class="description"><a href="#Event:Event-definePseudo">Function: Event.definePseudo</a></h2>
      <p class="description">It's possible to define your own pseudos with Event.definePseudo</p>
      <h3>Syntax</h3>
      <pre class="javascript">Event.<span class="me1">definePseudo</span><span class="br0">(</span><span class="kw3">name</span>, fn<span class="br0">)</span>;
</pre>
      <h3>Arguments:</h3>
      <ol>
        <li>name - (<em>string</em>) The pseudo name, for example <code>once</code> will become <code>click:once</code> </li>
        <li>fn - (<em>function</em>) The function that will get fired when the event is fired. This function should decide what will happen with the event, for example execute the event and remove the event</li>
      </ol>
      <h4>Signature:</h4>
      <pre class="javascript">fn<span class="br0">(</span>split, fn, args<span class="br0">)</span><span class="br0">{</span>
</pre>
      <ol>
        <li>split - (<em>object</em>) a parsed object of the <code>event:pseudo(value)</code> string
          <ul>
            <li>event - (<em>string</em>) the part before the <code>:</code> </li>
            <li>value - (<em>string</em>) between <code>(</code> and <code>)</code> </li>
            <li>pseudo - (<em>string</em>) between the <code>:</code> and <code>(</code> </li>
            <li>original - (<em>string</em>) the original event name, thus <code>event:pseudo(value)</code> </li>
          </ul>
        </li>
        <li>fn - (<em>function</em>) This is the function that has been passed in the <code>addEvent</code> method. So it is the 'fn' in <code>myEvent.addEvent('event:pseudo', fn)</code> </li>
        <li>args - (<em>array</em>) An array with arguments. The <a href="../../../docs/core/Types/Event.html">Event</a> object is in most cases the first element.</li>
      </ol>
      <p>The <code>this</code> variable refers to the Element where the event is added to.</p>
      <h3>Example</h3>
      <p>This is how the :once pseudo is implemented</p>
      <pre class="javascript">Event.<span class="me1">definePseudo</span><span class="br0">(</span><span class="st0">'once'</span>, <span class="kw2">function</span><span class="br0">(</span>split, fn, args<span class="br0">)</span><span class="br0">{</span>
    fn.<span class="me1">apply</span><span class="br0">(</span><span class="kw1">this</span>, args<span class="br0">)</span>;
    <span class="kw1">this</span>.<span class="me1">removeEvent</span><span class="br0">(</span>split.<span class="me1">original</span>, fn<span class="br0">)</span>;

<span class="br0">}</span><span class="br0">)</span>;
</pre>
    </div>
  </div>
<script type="text/javascript" src="../../../assets/mootools-core-1.3.js"></script>
<script type="text/javascript" src="../../../assets/mootools-more-smoothscroll.js"></script>
<script type="text/javascript" src="../../../assets/doc-assist.js"></script>
</body>
</html>
